<template>
  <view class="my-container" :class="{'disable-scroll':isSlide}">
    <view class="header" :class="{active:isShowTop}">
      <uni-icons @click="showLeftPop" color="#000" size="24" custom-prefix="iconfont" type="icon-caidan"></uni-icons>
      <uni-transition :mode-class="['fade','slide-top']" :show="isShowTop">
        <view v-if="!userInfo" class="info">
          <image class="avator" src="@/static/defaultavator.png"></image>
          <view @click="gotoLogin" class="user-name">
            立即登录
          </view>
        </view>
        <view v-else class="info">
          <image class="avator" :src="userInfo.profile.avatarUrl"></image>
          <view class="user-name">
            {{userInfo.profile.nickname}}
          </view>
        </view>

      </uni-transition>

      <uni-icons @click="gotoSearch" type="search" size="24"></uni-icons>
    </view>
    <view class="userInfo card" :class="{active:isShowTop}">
      <view @click="gotoLogin" v-if="!userInfo" class="no-login">
        <image class="avator-big" src="@/static/defaultavator.png"></image>
        <view class="username">
          立即登录
        </view>
      </view>
      <view v-else class="login">
        <image class="avator-big" :src="userInfo.profile.avatarUrl"></image>
        <view class="username">
          {{userInfo.profile.nickname}}
        </view>
        <view class="text">{{userInfo.profile.follows}}关注 | {{userInfo.profile.allSubscribedCount}}粉丝 |
          Lv.{{userInfo.level}}</view>
      </view>

    </view>
    <view class="mid-nav card">
      <view class="nav-container">
        <view class="nav-item" v-for="item,idx in navList" :key="idx">
          <uni-icons color="#eb4d44" size="26" custom-prefix="iconfont" :type="item.icon"></uni-icons>
          <text class="text">{{item.text}}</text>
        </view>

      </view>
      <view class="more">
        <uni-icons color="#666" type="plusempty"></uni-icons>
        音乐应用
      </view>
    </view>
    <view class="my-love-music card">
      <view class="heart-box">
        <uni-icons color="#fff" size="28" type="heart-filled"></uni-icons>
      </view>
      <view class="center-content">
        <view class="title">
          我喜欢的音乐
        </view>
        <view class="num">
          0首
        </view>
      </view>
      <view class="heart-beat">
        <uni-icons size="18" custom-prefix="iconfont" type="icon-icon_xindong"></uni-icons>
        <text>心动模式</text>
      </view>
    </view>
    <view class="song-order">
      <view class="order-header">
        <text>创建歌单</text>
        <text>收藏歌单</text>
      </view>
      <view class="create-order card">
        <view class="head">
          <view class="tip">
            创建歌单
          </view>
          <view class="add">
            <uni-icons color="#666" type="plusempty"></uni-icons>
            <uni-icons color="#666" size="18" custom-prefix="iconfont" type="icon-gengduo"></uni-icons>
          </view>
        </view>
        <view class="import">
          <view class="icon-box">
            <uni-icons color="#000" size="22" custom-prefix="iconfont" type="icon-daoru"></uni-icons>
          </view>
          <view class="text">
            一键导入外部音乐
          </view>
        </view>
      </view>
      <view class="collect-order card">
        <view class="head">
          <view class="tip">
            收藏歌单
          </view>
          <uni-icons color="#666" size="18" custom-prefix="iconfont" type="icon-gengduo"></uni-icons>
        </view>
        <view v-if="!songOrder" class="null">
          暂无收藏音乐
        </view>
        <view v-else class="order-list">
          <view @click="goToSongDetail(item.id)" v-for="item,index in songOrder" :key="index" class="order-item">
            <image class="img" :src="item.coverImgUrl" mode=""></image>
            <view class="desc">
              <view class="title">
                {{item.name}}
              </view>
              <view class="info">
                {{item.trackCount}}首，by{{item.creator.nickname}}
              </view>
            </view>
            <uni-icons color="#666" size="18" custom-prefix="iconfont" type="icon-gengduo"></uni-icons>
          </view>
        </view>
      </view>
    </view>
    <view class="for-you-suggest">
    </view>
  </view>
  <left-pop @changePop="changePop" ref="pop"></left-pop>
</template>

<script setup>
  import {
    getUserDetail,
    getLoginState,
    getUserOrder
  } from '@/request/user.js'
  import {
    onPageScroll,
    onShow,
    onHide
  } from "@dcloudio/uni-app";
  import {
    useStore
  } from 'vuex'
  import {
    computed,
    ref
  } from "vue";
  const store = useStore()
  const userInfo = ref(null)
  // getUserInfo().then(res=>{
  //   console.log(2,res);
  // })
  const id = computed(()=>{
    return store.state.user.userId
  })
  const getUserInfo = async () => {
    console.log('执行了');
    console.log(id.value);
    if (id.value) {
      const res = await getUserDetail(id.value)
      userInfo.value = res
      console.log(1);
    } else {
      userInfo.value = null
    }
  }
  // getUserInfo()
  const isShowTop = ref(false)
  onPageScroll((e) => {
    if (e.scrollTop > 36) {
      isShowTop.value = true
    } else {
      isShowTop.value = false
    }

  })
  const gotoSearch = () => {
    uni.navigateTo({
      url: "/pages/search/search"
    })
  }
  const songOrder = ref(null)
  const setUserOrder = () => {
    if (id.value) {
      getUserOrder(store.state.user.userId).then(res => {
        res.playlist = res.playlist.filter(v => {
          return v.subscribed
        })
        songOrder.value = res.playlist
      })
    }
  }
  onShow(() => {
    console.log('show');
    setUserOrder()
    getUserInfo()
  })
  onHide(() => {
    songOrder.value = []
  })
  const goToSongDetail = (id) => {
    // 跳转歌单页
    uni.navigateTo({
      url: '/pages/song-detail/song-detail?id=' + id,
    })
  }
  const navList = [{
    icon: 'icon-24gf-playCircle',
    text: '最近播放'
  }, {
    icon: 'icon-yinlewenjian',
    text: '本地/下载'
  }, {
    icon: 'icon-shangchuanyunpan',
    text: '云盘'
  }, {
    icon: 'icon-yigou',
    text: '已购'
  }, {
    icon: 'icon-haoyoutuijie',
    text: '我的好友'
  }, {
    icon: 'icon-shoucang',
    text: '收藏和赞'
  }, {
    icon: 'icon-kuosan-01',
    text: '我的播客'
  }, {
    icon: 'icon-tuandui',
    text: '乐迷团'
  }]
  const pop = ref(null)

  const showLeftPop = () => {
    pop.value.open()
  }
  const isSlide = ref(false)
  const changePop = (e) => {
    isSlide.value = e.show
    console.log(e.show);
  }
  const gotoLogin = () => {
    uni.navigateTo({
      url: "/pages/login/login"
    })
  }
</script>

<style lang="less">
  .my-container {
    padding: 0 30rpx;
    padding-bottom: 30rpx;
    background-color: #f8f8f8;

    &.disable-scroll {
      overflow: hidden;
      position: fixed;
    }

    .header {
      // padding: 0 30rpx;
      margin: 0 -30rpx;
      padding: 0rpx 30rpx;
      padding-top: 20rpx;
      padding-bottom: 16rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: sticky;
      top: 0;
      left: 0;
      z-index: 10;
      background-color: rgba(255, 255, 255, 0);
      transition: background-color 1s;


      &.active {
        background-color: rgba(255, 255, 255, 1);
      }



      .info {
        display: flex;
        align-items: center;

        .avator {
          // display: inline-block;
          width: 50rpx;
          height: 50rpx;
          border-radius: 50%;
          margin-right: 10rpx;
        }

        .user-name {
          font-size: 26rpx
        }
      }
    }

    .userInfo {
      // box-sizing: border-box;
      display: flex;
      flex-direction: column;
      position: relative;
      align-items: center;
      padding-top: 50rpx;
      padding-bottom: 30rpx;
      margin-top: 70rpx;
      opacity: 1;
      transition: all 1s;


      &.active {
        opacity: 0;
      }

      .avator-big {
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
        position: absolute;
        top: -60rpx;
        left: 50%;
        transform: translate(-50%);
      }

      .username {
        font-weight: 700;
        margin: 16rpx 0;
        font-size: 32rpx;
        text-align: center;
      }

      .text {
        font-size: 24rpx;
        color: #7c7c7c;   
        text-align: center;

      }
    }

    .mid-nav {

      // display: flex;
      // flex-direction: column;
      .nav-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .nav-item {
          min-width: 172.5rpx;
          margin-top: 25rpx;
          margin-bottom: 15rpx;
          display: flex;
          flex-direction: column;
          align-items: center;

          .text {
            font-size: 24rpx;
          }
        }
      }

      .more {
        padding: 12rpx 0;
        text-align: center;
        border-top: 0.5rpx solid #d3d3d3;
        font-size: 24rpx;
        color: #666;
      }
    }

    .my-love-music {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 30rpx;

      .heart-box {
        width: 100rpx;
        height: 100rpx;
        border-radius: 20rpx;
        background-color: #a6a6a6;
        margin-right: 20rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .center-content {
        flex: 1;

        .title {
          font-size: 30rpx;
        }

        .num {
          font-size: 24rpx;
          color: #9a9a9a;
        }
      }

      .heart-beat {
        border: 1px solid #ccc;
        font-size: 24rpx;
        display: flex;
        padding: 5rpx 12rpx;
        height: 40rpx;
        line-height: 40rpx;
        border-radius: 40rpx;
      }
    }

    .song-order {
      .order-header {
        display: flex;
        align-items: center;
        justify-content: space-around;
        color: #00004b;
        font-weight: 700;
        font-size: 30rpx;
      }

      .create-order {
        padding: 26rpx;

        .head {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 26rpx;

          .tip {
            font-size: 24rpx;
            color: #666;
          }

        }

        .import {
          display: flex;
          align-items: center;

          .icon-box {
            width: 100rpx;
            height: 100rpx;
            border-radius: 20rpx;
            background-color: #e3e3e3;
            margin-right: 20rpx;
            display: flex;
            align-items: center;
            justify-content: center;
          }

          .text {
            font-size: 30rpx;
          }
        }
      }
    }

    .collect-order {
      padding: 26rpx;

      .head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 26rpx;

        .tip {
          font-size: 24rpx;
          color: #666;
        }

      }

      .order-list {
        .order-item {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 20rpx;

          .img {
            width: 90rpx;
            height: 90rpx;
            border-radius: 10rpx;
            margin-right: 20rpx;
            // box-shadow: 4px 4px 5px rbga(0, 0, 0, 0.5);
          }

          .desc {
            flex: 1;

            .title {
              font-size: 30rpx;
            }

            .info {
              font-size: 22rpx;
            }
          }
        }
      }

      .null {
        text-align: center;
        color: #666;
        font-size: 26rpx;
      }
    }

    .for-you-suggest {}

  }

  .card {
    border-radius: 20rpx;
    background-color: #fff;
    margin: 40rpx 0;
  }
</style>
